/**个人中心 */
import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { Button, Modal, Avatar } from 'antd';
import { loginApi } from '@/api/login';
import { getByUserIdUrl } from '@/urls/url';

const UserAvatar = (props: {
  isPerson: boolean;
  setIsPerson: Dispatch<SetStateAction<boolean>>;
}) => {
  const { isPerson, setIsPerson } = props;
  const [user, setUser] = useState<any>({});
  const getUserDetails = async () => {
    const {
      data: { data },
    } = await loginApi(getByUserIdUrl);
    setUser(data);
  };
  useEffect(() => {
    getUserDetails();
  }, []);
  const handleCancel = () => {
    setIsPerson(false);
  };
  return (
    <>
      <Modal
        title="个人中心"
        visible={isPerson}
        onCancel={handleCancel}
        footer={[
          <Button key="关闭" onClick={handleCancel}>
            关闭
          </Button>,
        ]}
      >
        <p>
          头像：
          <Avatar src="https://joeschmoe.io/api/v1/random" />
        </p>
        <p>账号：{user&&user.creatorId}</p>
        <p>姓名：{user&&user.userName}</p>
        <p>手机号：{user&&user.userPhone}</p>
        <p>性别：{user&&user.isEnable ? '男' : '女'}</p>
      </Modal>
    </>
  );
};
export default UserAvatar;
